<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container {
            min-width: 800px;
            height: 500px;
            overflow: hidden;
            position: relative;
        }
        .container ul{
            list-style: none;
            position: absolute;
            left: 0;
        }
        .container li{
            float: left;
        }
        .container li img{
            position: relative;
            left: 0;
        }

        /*图片切换按钮*/
        .btn{
            width: 100%;
            text-align: center;
            position: absolute;
            bottom: 20px;
        }
        .btn a {
            width: 11px;
            height: 11px;
            background-color: #666666;
            display: inline-block;
        }
        .btn a:hover {
            background-color: #ffffff;
        }
        .btn .active {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
    <div class="container">
        <br>
        <h3>
            轮播图：屏幕自适应居中 + 无缝切换
        </h3>
        <ul>
            <li><img src="../huawei_home/images/1.jpg" alt=""></li>
            <li><img src="2.jpg" alt=""></li>
            <li><img src="3.jpg" alt=""></li>
        </ul>

        <div class="btn">
            <a href="#" class="active"></a>
            <a href="#"></a>
            <a href="#"></a>
        </div>

    </div>

    <script src="jquery.min.js"></script>
    <script>
        +function () {
            //选择器
            var $$ = function (selector) {
                return document.querySelector(selector);
            };

            //获取元素节点
            var wrapDiv = $$('.container');
            var ul = $$('.container ul');
            var li_s = ul.children;
            var img_s = ul.getElementsByTagName('img');
            var btn_s = $$('.btn').children;

            //当前按钮位置
            var btn_index = 0;
            //当前图片位置
            var img_index = 0;

            //图片宽度
            var imgWidth = 1920;
            ul.style.width = 1920 * li_s.length + 'px';

            //屏幕居中自适应
            function resize() {
                //视口宽度
                var viewWidth = document.documentElement.clientWidth;
                if(viewWidth >= 800){
                    for(var i = 0; i < img_s.length; i++){
                        img_s[i].style.left = -(imgWidth - viewWidth)/2 + 'px';
                    }
                }
            }
            resize();
            window.onresize = resize;

            //图片切换按钮
            for(var i = 0; i < btn_s.length; i++){
                btn_s[i].index = i;
                btn_s[i].onclick = function () {
                    for(var i = 0; i < btn_s.length; i++){
                        btn_s[i].className = '';
                    }
                    this.className = 'active';
                    ul.style.left = -(imgWidth * this.index) + 'px';
                }
            }

            //定时自动切换
            setInterval(change, 3000);
            function change() {

                //到达最后一个
                if(btn_index == btn_s.length-1){
                    //无缝切换_1
                    li_s[0].style.position = "relative";
                    li_s[0].style.left = li_s.length * imgWidth + 'px';
                    btn_index = 0;
                }else{
                    btn_index++;
                }

                //图片位置+1
                img_index++;

                //改变切换按钮状态
                for(var i = 0; i < btn_s.length; i++){
                    btn_s[i].className = '';
                }
                btn_s[btn_index].className = 'active';

                //图片切换
                $('.container ul').animate({left:-(img_index * imgWidth) +'px'}, function () {
                    //无缝切换——2
                    if(btn_index == 0){
                        li_s[0].style.position = 'static';
                        ul.style.left = 0;
                        img_index = 0;
                    }
                });

            }

        }(window.jQuery)
    </script>
</body>
</html>